<template>
  <div class="school-container">
    <el-tabs v-model="activeTab" class="enhanced-tabs" @tab-click="handleClick">
      <el-tab-pane label="合作院校" name="list">
        <div class="school-list-container">
          <el-table
              :data="schools"
              style="width: 100%"
              @row-click="selectSchool"
              :row-class-name="tableRowClassName"
              class="elegant-table"
          >
            <el-table-column label="校徽" width="100" align="center">
              <template #default="{ row }">
                <div class="logo-wrapper">
                  <el-avatar
                      :size="60"
                      :src="row.logo || 'https://via.placeholder.com/60x60?text=Logo'"
                      shape="square"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="院校名称" width="180" />
            <el-table-column prop="description" label="院校简介" />


          </el-table>
        </div>
      </el-tab-pane>

      <el-tab-pane label="院校详情" name="detail" v-if="selectedSchool">
        <div class="school-detail-container">
          <div class="detail-header">
            <el-avatar
                :size="100"
                :src="selectedSchool.logo || 'https://via.placeholder.com/100x100?text=Logo'"
                shape="square"
                class="school-avatar"
            />
            <div class="header-content">
              <h2 class="school-name">{{ selectedSchool.name }}</h2>
              <p class="school-description">{{ selectedSchool.description }}</p>
              <div class="quick-contact">
                <el-link
                    :href="selectedSchool.contact.website"
                    target="_blank"
                    type="primary"
                    :underline="false"
                    class="contact-link"
                >
                  <el-icon><Link /></el-icon>
                  <span>官网</span>
                </el-link>
                <el-link
                    type="primary"
                    :underline="false"
                    class="contact-link"
                >
                  <el-icon><Message /></el-icon>
                  <span>{{ selectedSchool.contact.email }}</span>
                </el-link>
                <el-link
                    type="primary"
                    :underline="false"
                    class="contact-link"
                >
                  <el-icon><Phone /></el-icon>
                  <span>{{ selectedSchool.contact.phone }}</span>
                </el-link>
              </div>
            </div>
          </div>

          <el-divider />

          <el-tabs type="card" class="detail-tabs">
            <el-tab-pane label="历史沿革">
              <div class="tab-content">
                <p>{{ selectedSchool.details.history }}</p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="办学理念">
              <div class="tab-content">
                <p>{{ selectedSchool.details.philosophy }}</p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="师资力量">
              <div class="tab-content">
                <p>{{ selectedSchool.details.faculty }}</p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="学科建设">
              <div class="tab-content">
                <p>{{ selectedSchool.details.programs }}</p>
              </div>
            </el-tab-pane>
          </el-tabs>

          <div class="back-button">
            <el-button
                type="primary"
                plain
                @click="activeTab = 'list'"
                size="large"
            >
              <el-icon><ArrowLeft /></el-icon>
              <span>返回列表</span>
            </el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import { Link, Message, Phone, ArrowLeft } from '@element-plus/icons-vue';

import image31 from '../../assets/31.jpg'
import image32 from '../../assets/32.jpg'
import image33 from '../../assets/33.jpg'
import image34 from '../../assets/34.jpg'
import image35 from '../../assets/35.jpg'
import image36 from '../../assets/36.jpg'
import image37 from '../../assets/37.jpg'
import image38 from '../../assets/38.jpg'
import image39 from '../../assets/39.jpg'
import image40 from '../../assets/40.jpg'
import image41 from '../../assets/41.jpg'
import image42 from '../../assets/42.jpg'
import image43 from '../../assets/43.jpg'
import image44 from '../../assets/44.jpg'
import image45 from '../../assets/45.jpg'
import image46 from '../../assets/46.jpg'
import image47 from '../../assets/47.jpg'
import image48 from '../../assets/48.jpg'
import image49 from '../../assets/49.jpg'
import image50 from '../../assets/50.jpg'
import image51 from '../../assets/51.jpg'

const schools = ref([
  {
    id: 1,
    name: "清华大学",
    logo: image31,
    description: "中国顶尖综合性研究型大学，以工程和理科见长。",
    details: {
      history: "始建于1911年，前身为清华学堂。",
      philosophy: "自强不息，厚德载物。",
      faculty: "拥有30+院士，2000+教授。",
      programs: "工程、计算机、经济管理、建筑等学科领先。"
    },
    contact: {
      phone: "010-62793001",
      email: "contact@tsinghua.edu.cn",
      website: "https://www.tsinghua.edu.cn"
    }
  },
  {
    id: 2,
    name: "北京大学",
    logo: image32,
    description: "中国最古老的现代大学，文理医工全面发展。",
    details: {
      history: "1898年创立，初名京师大学堂。",
      philosophy: "思想自由，兼容并包。",
      faculty: "50+院士，诺贝尔奖得主2人。",
      programs: "中文、历史、法学、医学等学科国际知名。"
    },
    contact: {
      phone: "010-62751114",
      email: "contact@pku.edu.cn",
      website: "https://www.pku.edu.cn"
    }
  },
  {
    id: 3,
    name: "复旦大学",
    logo: image33,
    description: "上海综合性重点大学，以医学和人文社科著称。",
    details: {
      history: "1905年创办，原名复旦公学。",
      philosophy: "博学而笃志，切问而近思。",
      faculty: "40+院士，长江学者200+。",
      programs: "新闻学、经济学、临床医学等学科领先。"
    },
    contact: {
      phone: "021-65642222",
      email: "contact@fudan.edu.cn",
      website: "https://www.fudan.edu.cn"
    }
  },
  {
    id: 4,
    name: "上海交通大学",
    logo: image34,
    description: "中国工程科技领域的顶尖学府。",
    details: {
      history: "1896年创立，前身为南洋公学。",
      philosophy: "饮水思源，爱国荣校。",
      faculty: "35+院士，IEEE Fellow 50+。",
      programs: "船舶海洋、机械工程、人工智能等学科领先。"
    },
    contact: {
      phone: "021-34206000",
      email: "contact@sjtu.edu.cn",
      website: "https://www.sjtu.edu.cn"
    }
  },
  {
    id: 5,
    name: "浙江大学",
    logo: image35,
    description: "浙江省综合性研究型大学，学科覆盖全面。",
    details: {
      history: "1897年创办，前身为求是书院。",
      philosophy: "求是创新。",
      faculty: "45+院士，国家级人才500+。",
      programs: "计算机、农业、医学等学科国内领先。"
    },
    contact: {
      phone: "0571-87951111",
      email: "contact@zju.edu.cn",
      website: "https://www.zju.edu.cn"
    }
  },
  {
    id: 6,
    name: "南京大学",
    logo: image36,
    description: "江苏省历史悠久的综合性大学。",
    details: {
      history: "1902年创立，前身为三江师范学堂。",
      philosophy: "诚朴雄伟，励学敦行。",
      faculty: "30+院士，文科大师云集。",
      programs: "天文、地质、中文等学科突出。"
    },
    contact: {
      phone: "025-83593186",
      email: "contact@nju.edu.cn",
      website: "https://www.nju.edu.cn"
    }
  },
  {
    id: 7,
    name: "武汉大学",
    logo: image37,
    description: "湖北综合性大学，以樱花和法学闻名。",
    details: {
      history: "1893年创办，前身为自强学堂。",
      philosophy: "自强、弘毅、求是、拓新。",
      faculty: "20+院士，法学泰斗众多。",
      programs: "测绘、法学、病毒学等学科领先。"
    },
    contact: {
      phone: "027-68752231",
      email: "contact@whu.edu.cn",
      website: "https://www.whu.edu.cn"
    }
  },
  {
    id: 8,
    name: "中山大学",
    logo: image50,
    description: "广东省综合性重点大学，医学和商科突出。",
    details: {
      history: "1924年由孙中山先生创立。",
      philosophy: "博学、审问、慎思、明辨、笃行。",
      faculty: "25+院士，珠江学者150+。",
      programs: "医学、管理学、海洋科学等学科领先。"
    },
    contact: {
      phone: "020-84112828",
      email: "contact@sysu.edu.cn",
      website: "https://www.sysu.edu.cn"
    }
  },
  {
    id: 9,
    name: "哈尔滨工业大学",
    logo: image38,
    description: "中国顶尖工科院校，航天领域强校。",
    details: {
      history: "1920年建校，隶属于工业和信息化部。",
      philosophy: "规格严格，功夫到家。",
      faculty: "40+院士，航天专家云集。",
      programs: "航天工程、机器人、材料科学等学科领先。"
    },
    contact: {
      phone: "0451-86412114",
      email: "contact@hit.edu.cn",
      website: "https://www.hit.edu.cn"
    }
  },
  {
    id: 10,
    name: "西安交通大学",
    logo:image39,
    description: "西北地区综合性研究型大学，工科实力强劲。",
    details: {
      history: "1896年创办，前身为南洋公学。",
      philosophy: "精勤求学，敦笃励志。",
      faculty: "30+院士，国家级人才400+。",
      programs: "能源动力、电气工程、管理学等学科领先。"
    },
    contact: {
      phone: "029-82668222",
      email: "contact@xjtu.edu.cn",
      website: "https://www.xjtu.edu.cn"
    }
  },
  {
    id: 11,
    name: "同济大学",
    logo: image51,
    description: "上海综合性大学，以建筑和土木工程闻名。",
    details: {
      history: "1907年由德国医生创办。",
      philosophy: "同舟共济，自强不息。",
      faculty: "20+院士，建筑大师辈出。",
      programs: "建筑学、土木工程、设计学等学科领先。"
    },
    contact: {
      phone: "021-65982200",
      email: "contact@tongji.edu.cn",
      website: "https://www.tongji.edu.cn"
    }
  },
  {
    id: 12,
    name: "四川大学",
    logo: image40,
    description: "西南地区综合性重点大学，医学实力突出。",
    details: {
      history: "1896年创办，由多所院校合并而成。",
      philosophy: "海纳百川，有容乃大。",
      faculty: "15+院士，华西医学专家众多。",
      programs: "口腔医学、生物医学、宗教学等学科领先。"
    },
    contact: {
      phone: "028-85406310",
      email: "contact@scu.edu.cn",
      website: "https://www.scu.edu.cn"
    }
  },
  {
    id: 13,
    name: "南开大学",
    logo: image41,
    description: "天津综合性大学，以经济学和化学见长。",
    details: {
      history: "1919年由张伯苓创办。",
      philosophy: "允公允能，日新月异。",
      faculty: "10+院士，经济学泰斗云集。",
      programs: "经济学、化学、历史学等学科领先。"
    },
    contact: {
      phone: "022-23508210",
      email: "contact@nankai.edu.cn",
      website: "https://www.nankai.edu.cn"
    }
  },
  {
    id: 14,
    name: "中国人民大学",
    logo: image42,
    description: "中国人文社科领域的顶尖学府。",
    details: {
      history: "1937年创办，前身为陕北公学。",
      philosophy: "实事求是。",
      faculty: "文科大师云集，经济学、法学专家众多。",
      programs: "经济学、法学、新闻学等学科领先。"
    },
    contact: {
      phone: "010-62511156",
      email: "contact@ruc.edu.cn",
      website: "https://www.ruc.edu.cn"
    }
  },
  {
    id: 15,
    name: "北京航空航天大学",
    logo: image43,
    description: "中国航空航天领域的顶尖院校。",
    details: {
      history: "1952年由多所高校航空系合并成立。",
      philosophy: "德才兼备，知行合一。",
      faculty: "25+院士，航天工程师摇篮。",
      programs: "航空航天工程、计算机、材料科学等学科领先。"
    },
    contact: {
      phone: "010-82317114",
      email: "contact@buaa.edu.cn",
      website: "https://www.buaa.edu.cn"
    }
  },
  {
    id: 16,
    name: "华中科技大学",
    logo: image44,
    description: "湖北综合性大学，工科和医学实力强劲。",
    details: {
      history: "1952年由多所院校合并成立。",
      philosophy: "明德厚学，求是创新。",
      faculty: "20+院士，机械工程专家众多。",
      programs: "机械工程、光学工程、公共卫生等学科领先。"
    },
    contact: {
      phone: "027-87541114",
      email: "contact@hust.edu.cn",
      website: "https://www.hust.edu.cn"
    }
  },
  {
    id: 17,
    name: "东南大学",
    logo: image45,
    description: "江苏综合性大学，建筑和电子学科突出。",
    details: {
      history: "1902年创办，前身为三江师范学堂。",
      philosophy: "止于至善。",
      faculty: "15+院士，建筑大师辈出。",
      programs: "建筑学、电子工程、生物医学等学科领先。"
    },
    contact: {
      phone: "025-83792001",
      email: "contact@seu.edu.cn",
      website: "https://www.seu.edu.cn"
    }
  },
  {
    id: 18,
    name: "天津大学",
    logo: image46,
    description: "中国第一所现代大学，工科实力雄厚。",
    details: {
      history: "1895年创办，前身为北洋大学堂。",
      philosophy: "实事求是。",
      faculty: "20+院士，化工专家云集。",
      programs: "化学工程、精密仪器、建筑学等学科领先。"
    },
    contact: {
      phone: "022-27403500",
      email: "contact@tju.edu.cn",
      website: "https://www.tju.edu.cn"
    }
  },
  {
    id: 19,
    name: "厦门大学",
    logo: image47,
    description: "福建综合性大学，以经济和海洋科学见长。",
    details: {
      history: "1921年由陈嘉庚创办。",
      philosophy: "自强不息，止于至善。",
      faculty: "10+院士，会计学泰斗云集。",
      programs: "经济学、海洋科学、化学等学科领先。"
    },
    contact: {
      phone: "0592-2186111",
      email: "contact@xmu.edu.cn",
      website: "https://www.xmu.edu.cn"
    }
  },
  {
    id: 20,
    name: "北京师范大学",
    logo:image48,
    description: "中国师范类院校的顶尖学府。",
    details: {
      history: "1902年创办，前身为京师大学堂师范馆。",
      philosophy: "学为人师，行为世范。",
      faculty: "15+院士，教育学专家众多。",
      programs: "教育学、心理学、地理学等学科领先。"
    },
    contact: {
      phone: "010-58806183",
      email: "contact@bnu.edu.cn",
      website: "https://www.bnu.edu.cn"
    }
  },
  {
    id: 21,
    name: "国防科技大学",
    logo: image49,
    description: "中国军事科技领域的最高学府。",
    details: {
      history: "1953年创办，直属中央军委。",
      philosophy: "厚德博学，强军兴国。",
      faculty: "军事科技专家云集，科研成果保密。",
      programs: "计算机、航天工程、电子信息等学科领先。"
    },
    contact: {
      phone: "0731-84572601",
      email: "contact@nudt.edu.cn",
      website: "https://www.nudt.edu.cn"
    }
  }
]);


const selectedSchool = ref<any>(null);
const activeTab = ref('list');

const selectSchool = (school: any) => {
  selectedSchool.value = school;
  activeTab.value = 'detail';
};

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const tableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex % 2 === 1 ? 'striped-row' : '';
};
</script>

<style scoped lang="scss">
.school-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.enhanced-tabs {
  :deep(.el-tabs__header) {
    margin: 0;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
    background-color: #e4e7ed;
  }

  :deep(.el-tabs__item) {
    font-size: 16px;
    font-weight: 500;
    padding: 0 24px;
    height: 48px;
    line-height: 48px;
  }
}

.school-list-container {
  margin-top: 16px;
}

.elegant-table {
  :deep(.el-table__header) {
    th {
      background-color: #f8fafc;
      color: #606266;
      font-weight: 600;
    }
  }

  :deep(.el-table__row) {
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background-color: #f5f7fa;
    }
  }

  :deep(.striped-row) {
    background-color: #fafafa;
  }
}

.logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
}

.school-detail-container {
  padding: 20px;
}

.detail-header {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}

.school-avatar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  flex: 1;
}

.school-name {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.school-description {
  margin: 0 0 16px 0;
  color: #606266;
  line-height: 1.6;
}

.quick-contact {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;

  .el-icon {
    font-size: 16px;
  }
}

.detail-tabs {
  margin-top: 24px;

  :deep(.el-tabs__header) {
    margin: 0;
  }

  :deep(.el-tabs__item) {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
  }
}

.tab-content {
  padding: 16px;
  line-height: 1.8;
  color: #606266;
}

.back-button {
  margin-top: 24px;
  text-align: center;
}

.el-divider {
  margin: 16px 0;
}
</style>